import { c } from 'vite'; import { W } from 'vue-cropper';
<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-05-11 08:47:22
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-03-16 11:25:56
 * @FilePath: /hr_new_vue3/src/views/Management/Human/HumanRoster/FileDetail/Components/Container/Attendance/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 人员档案详情-材料附件 -->
<template>
  <div class="wrap">
    <div class="header">
      <a-input-search
        :style="{ width: '320px' }"
        placeholder="请输入文件名称"
        search-button
        v-model="searchVal"
        @search="onSearch"
        @press-enter="onSearch"
      >
        <template #button-icon>
          <icon-search />
        </template>
      </a-input-search>
      <a-space>
        <a-button type="primary">打包下载</a-button>
        <a-button type="primary">档案类型设置</a-button>
      </a-space>
    </div>
    <div v-for="(item, index) in data" :key="index">
      <div class="title-box">
        <div class="title">
          <div
            :style="{
              marginLeft: '25px'
            }"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
      <div class="img-box">
        <a-image
          v-for="(el, index2) in item.value.slice(0, 4)"
          height="200"
          width="100%"
          :key="index2"
          class="image"
          :src="el.src"
          :title="el.title"
          footer-position="outer"
          :footer-class="aa"
        >
        </a-image>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { GetHumanRosterDetail } from '@/apis/management/human/humanRoster';

const route = useRoute();
let id = Number(route.query.id);

onBeforeRouteUpdate((to) => {
  id = Number(to.query.id);
  getData();
});

const data = ref([
  {
    title: '基本资料',
    value: [
      {
        src: 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
        title: '证件1'
      },
      {
        src: 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
        title: '证件2'
      },
      {
        src: 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
        title: '证件3'
      },
      {
        src: 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
        title: '证件4'
      }
    ]
  },
  {
    title: '语言能力',
    value: []
  },
  {
    title: '教育信息',
    value: []
  },
  {
    title: '能力资格',
    value: []
  },
  {
    title: '任职资料',
    value: []
  },
  {
    title: '工作履历',
    value: []
  },
  {
    title: '项目经验',
    value: []
  },
  {
    title: '科研成果',
    value: []
  }
]);
let aa = ['aa'];

const getData = async () => {
  try {
    const res = await GetHumanRosterDetail({ id });
    console.log(res);
  } catch (error: unknown) {
    console.log(error);
  }
};
</script>

<style lang="less" scoped>
.wrap {
  width: 100%;
  .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .title-box {
    position: relative;
    .title {
      display: flex;
      align-items: center;
      height: 36px;
      border-radius: 4px;
      font-weight: 700;
      margin-bottom: 10px;
      background: #edeffd;
    }
  }

  .title-box::before {
    position: absolute;
    // top: 33px;
    left: 10px;
    display: inline-block;
    height: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    margin-right: 20px;
    border-radius: 2px;
    // transform: translateY(-50%);
    content: '';
    background-color: #165dff;
  }

  .img-box {
    display: flex;
    margin-bottom: 30px;
    gap: 20px;
    // justify-content: space-around;
    .image {
      flex: 1 0 20%;
    }

    &-title {
      height: 40px;
      width: 100%;
      background-color: #fff;
      border: 1px solid #ccc;
      font-weight: 700;
      margin-bottom: 10px;
    }
  }
}
.aa {
  width: 100%;
  background-color: red;
}
</style>
